<template>
  <div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>项目里程碑</div>
        <Tips />
      </div>
      <ConstructionBox :listData="listDatas" />
      <el-pagination
        class="box-page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="60"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import ConstructionBox from "../../constructionBox/index";
import Datas from "../../constructionBox/data.js";
import Tips from "../../constructionBox/tips";

export default {
  data() {
    return {
      listDatas: [],
      currentPage: 1
    };
  },
  components: {
    ConstructionBox,
    Tips
  },
  created() {
    this.listDatas = [...Datas.boxdDtas()];
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.box-construction {
  min-height: 100px;
  .box-title {
    div {
      float: left;
      &:nth-child(2) {
        float: right;
      }
    }
  }
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
</style>